<template>
  <div class="settings-phone">
    <settings-detail-template
      @save="saveSettings" 
      @click="handleHideLayer"
      :name="name">
      <div class="form-wrapper">
        <form class="form box-shadow">
          <input-item 
            :title="'手机号'" 
            :placeholder="'请输入手机号获取验证码'"
            @input="updatePhoneNo"
            >
            <span v-show="phoneNo !== ''" class="get-code">获取验证码</span>
          </input-item>
          <input-item 
            :title="'验证码'" 
            :placeholder="'请输入收到的6位验证码'"
            :errorMsg="errorMsg"
            @input="updateVarifyCode"
            >
          </input-item>
        </form>
      </div>
    </settings-detail-template>
  </div>
</template>
<script>
import SettingsDetailTemplate from './settings-detail-template'
import InputItem from '@/pages/login/components/input-item'
export default {
  components: {
    SettingsDetailTemplate,
    InputItem
  },
  data() {
    return {
      name: '手机号',
      phoneNo: '',
      varifyCode: '',
      errorMsg: '',
      saved : false
    }
  },
  methods: {
    updatePhoneNo(val) {
      this.phoneNo = val
    },
    updateVarifyCode(val) {
      this.varifyCode = val
      if (val == '') {
        this.errorMsg = val
      }
    },
    saveSettings() {
      if(this.phoneNo != ''){
        if (this.varifyCode == '') {
          this.errorMsg = '验证码不能为空'
        }
        else {
          this.saved = true
          this.$emit('pop',"保存成功")
        }
      }
    },
    handleHideLayer() {
      if(this.saved != false){
        this.$emit('click')
      }
      else{
        this.$emit('pop',"未修改")
        this.$emit('click')
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .settings-phone 
    .form-wrapper 
      box-sizing border-box 
      padding 10px
    .form 
      border-radius 3px
      background #fff
      border 1px solid $color-divide-line
    .get-code 
      margin-left 10px 
      color $color-theme-dark
</style>